import React, { Component, Fragment } from 'react'
import {CSSTransition} from 'react-transition-group'
import './style.css'

export default class App extends Component {

    constructor(props){
        super(props)
        this.state = {
            show: true
        }
        this.handleToggle = this.handleToggle.bind(this)
    }

    render() {
        return (
            <Fragment>
                <CSSTransition  
                in={this.state.show} 
                timeout={1000}
                classNames="fade"
                // 隐藏时 卸载当前dom
                unmountOnExit
                // 动画结束的钩子函数
                onEntered={el=>el.style.color="blue"}
                // 第一次加载也有动画
                appear={true}
                >
                    <div> hello </div> 
                </CSSTransition> 
                <button onClick = {this.handleToggle}>toggle</button>
            </Fragment> 
        )
    }

    handleToggle(){
       this.setState(prevState =>({
           show: !prevState.show
       }))
    }

}
